import React from 'react';
import { useTranslation } from 'react-i18next';
import LoginLanguageSelector from './LoginLanguageSelector';
import LanguageSelector from './LanguageSelector';

const PositionTest = () => {
  const { t } = useTranslation();

  return (
    <div>
      {/* 固定定位的LoginLanguageSelector - 始终在右上角 */}
      <LoginLanguageSelector />

      {/* 页面内容 */}
      <div style={{
        minHeight: '200vh', // 超长页面用于测试滚动
        background: 'linear-gradient(45deg, #667eea 0%, #764ba2 25%, #667eea 50%, #764ba2 75%, #667eea 100%)',
        backgroundSize: '400% 400%',
        animation: 'gradientShift 10s ease infinite',
        padding: '40px',
        color: 'white'
      }}>
        <div style={{
          maxWidth: '800px',
          margin: '0 auto',
          textAlign: 'center'
        }}>
          <h1 style={{ 
            fontSize: '48px', 
            marginBottom: '20px',
            textShadow: '2px 2px 4px rgba(0,0,0,0.3)'
          }}>
            🎯 语言选择器位置测试
          </h1>
          
          <div style={{
            background: 'rgba(255, 255, 255, 0.1)',
            padding: '30px',
            borderRadius: '15px',
            marginBottom: '40px',
            backdropFilter: 'blur(10px)'
          }}>
            <h2 style={{ marginBottom: '20px' }}>✅ 固定定位特点</h2>
            <ul style={{ 
              listStyle: 'none', 
              padding: 0, 
              fontSize: '18px',
              lineHeight: '2'
            }}>
              <li>📍 <strong>固定在右上角</strong> - 不受页面滚动影响</li>
              <li>🎨 <strong>高对比度设计</strong> - 在任何背景下都清晰可见</li>
              <li>🚀 <strong>最高优先级</strong> - z-index: 1000 确保在顶层</li>
              <li>📱 <strong>响应式适配</strong> - 在不同设备上保持位置</li>
            </ul>
          </div>

          <div style={{
            background: 'rgba(255, 255, 255, 0.1)',
            padding: '30px',
            borderRadius: '15px',
            marginBottom: '40px',
            backdropFilter: 'blur(10px)'
          }}>
            <h2 style={{ marginBottom: '20px' }}>🧪 滚动测试</h2>
            <p style={{ fontSize: '18px', lineHeight: '1.6' }}>
              请向下滚动页面，观察右上角的语言选择器是否始终保持在固定位置。
              无论页面如何滚动，语言选择器都应该"悬浮"在右上角。
            </p>
          </div>

          {/* 大量内容用于测试滚动 */}
          {[...Array(10)].map((_, index) => (
            <div key={index} style={{
              background: 'rgba(255, 255, 255, 0.1)',
              padding: '30px',
              borderRadius: '15px',
              marginBottom: '30px',
              backdropFilter: 'blur(10px)'
            }}>
              <h3 style={{ marginBottom: '15px' }}>
                📝 测试内容块 #{index + 1}
              </h3>
              <p style={{ fontSize: '16px', lineHeight: '1.6', marginBottom: '15px' }}>
                这是第 {index + 1} 个内容块。当您滚动页面时，请注意观察右上角的语言选择器。
                它应该始终保持在视窗的右上角位置，不会随着页面内容一起滚动。
              </p>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                gap: '15px',
                marginTop: '20px'
              }}>
                <div style={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  padding: '15px',
                  borderRadius: '8px'
                }}>
                  <strong>当前语言:</strong><br/>
                  {t('login.title')}
                </div>
                <div style={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  padding: '15px',
                  borderRadius: '8px'
                }}>
                  <strong>登录按钮:</strong><br/>
                  {t('login.loginButton')}
                </div>
                <div style={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  padding: '15px',
                  borderRadius: '8px'
                }}>
                  <strong>注册链接:</strong><br/>
                  {t('login.register')}
                </div>
              </div>
            </div>
          ))}

          <div style={{
            background: 'rgba(255, 255, 255, 0.1)',
            padding: '40px',
            borderRadius: '15px',
            marginTop: '50px',
            backdropFilter: 'blur(10px)',
            textAlign: 'center'
          }}>
            <h2 style={{ fontSize: '32px', marginBottom: '20px' }}>
              🎉 测试完成！
            </h2>
            <p style={{ fontSize: '18px', lineHeight: '1.6' }}>
              如果语言选择器始终保持在右上角，说明固定定位配置成功！
              现在您可以在任何页面位置轻松切换语言。
            </p>
            <div style={{
              marginTop: '30px',
              padding: '20px',
              background: 'rgba(52, 211, 153, 0.2)',
              borderRadius: '10px',
              border: '2px solid rgba(52, 211, 153, 0.5)'
            }}>
              <h3 style={{ color: '#10b981', marginBottom: '10px' }}>
                ✅ 技术实现
              </h3>
              <p style={{ fontSize: '14px' }}>
                使用 position: fixed + top: 20px + right: 20px + z-index: 1000
              </p>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes gradientShift {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
      `}</style>
    </div>
  );
};

export default PositionTest; 